/*@-webkit-keyframes glow {
    0% {
        -webkit-transform: scale(0.75);        
    }
    25%{
        -webkit-transform: rotate(5deg)
    }
    75%{
        -webkit-transform: rotate(-5deg)
    }
    100% {
        -webkit-box-shadow: 0 0 18px rgba(0, 140, 255, 1.0);
        border-color: rgba(160, 179, 214, 1.0);
        -webkit-transform: scale(0.78);
    }
}


.top {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}*/
body{
    padding: 0;
    margin: 0;
}

@-webkit-keyframes glow_top {

    100% {
        -webkit-transform:translateY(-100px);
    }
}

@-webkit-keyframes glow_bottom {

    100% {
        -webkit-transform:translateY(100px);
    }
}


.top:hover{
    -webkit-animation-name: glow_top;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease-in-out;
}

.bottom:active{
    -webkit-animation-name: glow_bottom;
    -webkit-animation-duration: 1s;
/*    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;*/
    -webkit-animation-timing-function: ease-in-out;
}

.view{
    position: relative;
    width: 200px;
    height:200px;
    overflow: hidden;
}

.main{
    width: 200px;
    height: 800px;
    position: relative;
    background-color: #999;
}

.div1{
    width: 200px;
    height: 200px;
    position: relative;
    background-color: red;
}

.div2{
    width: 200px;
    height: 200px;
    position: relative;
    background-color: yellow;
}

.div3{
    width: 200px;
    height: 200px;
    position: relative;
    background-color: blue;
}

.div4{
    width: 200px;
    height: 200px;
    position: relative;
    background-color: #451265;
}
